<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h3>工作：{{job.type}}</h3>
  <h3>薪水：{{job.salary}}</h3>
  <button @click = "changeInfo" type="">修改一个人的信息</button>
</template>

<script>
import {ref} from "vue"

export default {
  
  name: "App",
  setup() {
    let name = ref("李四");
    let age = ref(18);
    const job = ref({
      type:"后端工程师",
      salary:"20k"
    })

    // name、age、job都是一个refrence对象，简称引用对象

    function changeInfo() {
      // name.value = "张三";
      // age.value = 27;
      job.value.type = "前端工程师";
      job.value.salary = "15k"

      console.log(job)
    }
    return {
      name,
      age,
      changeInfo,
      job
    }
  },
};
</script>
